import React from 'react';

// App 函数就是内部返回 JSX 结构


// 函数的好处
//   1. 函数有自己的局部作用域
//   2. 函数在调用的时候可以传参
//   3. 函数还有返回值，可返回加工过的 JSX

const fn = (msg)=>{
  msg = msg.split('').reverse().join('');
  return <h1>{msg}</h1>;
}
// 调用函数：{ fn(123) }

// 函数组件
// React 的函数还可以用于创建自定义组件
//    1. 函数组件首字母要求大写
//    2. 函数内部返回 JSX
//    3. 自定义组件的属性可以被函数的形参接收
const Fn2 = ({msg})=>{
  msg = msg.split('').reverse().join('');
  return <h1>{msg}</h1>;
}
// 调用函数组件：<Fn2 msg='123'></Fn2>

function App() {
  const msg = '你好白'; 
  return (
    <div className="App">
      {/* 在函数调用的时候传递参数，内部返回 JSX */}
      {/* {fn(msg)} */}

      {/* 函数式组件调用，通过属性传递参数，内部返回 JSX */}
      <Fn2 msg='123'></Fn2>
    </div>
  );
}
export default App;
